<template>
  <div class="brick-outer">
    <div class="brick-header">
      <h2 class="title">手机</h2>
      <div class="more">
        <a href="javascript:;">查看更多</a>
        <!-- <ul class="tab-list">
          <li class="tab-active">耳机</li>
          <li>穿戴</li>
        </ul> -->
      </div>
    </div>
    <div class="brick">
      <div class="q">
        <Item
          v-for="(brick, index) in bricks.large"
          :key="index"
          :type="brick.type"
          :msg="brick.msg"></Item>
      </div>
      <div class="w">
        <Item
          v-for="(brick, index) in bricks.middle"
          :key="index"
          :type="brick.type"
          :msg="brick.msg"></Item>
        <div
          class="e"
          v-if="bricks.small.length">
          <Item
            v-for="(brick, index) in bricks.small"
            :key="index"
            :type="brick.type"
            :msg="brick.msg"></Item>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Item from '../item/index.vue'
import * as homeModel from '@/model/homeModel'

const props = defineProps({
  brickList: Object
})

const getBrick = () => {
  const result = {
    large: [] as homeModel.brick[],
    middle: [] as homeModel.brick[],
    small: [] as homeModel.brick[]
  }
  props.brickList!.forEach((e: homeModel.brick) => {
    if (e.type === 'large') {
      result.large.push(e)
    } else if (e.type === 'middle') {
      result.middle.push(e)
    } else {
      result.small.push(e)
    }
  })
  return result
}
const bricks = getBrick()
</script>

<style lang="less" scoped>
.brick-outer {
  .brick-header {
    position: relative;
    height: 58px;
    .title {
      margin: 0;
      font-size: 22px;
      font-weight: 200;
      line-height: 58px;
      color: #333;
    }
    .more {
      position: absolute;
      top: 0;
      right: 0;
      a {
        font-size: 16px;
        line-height: 58px;
        color: #424242;
        transition: all 0.4s;
        &:hover {
          color: #ff6700;
        }
      }
      .tab-list {
        margin: 0;
        padding: 16px 0 0;
        list-style-type: none;
        font-size: 16px;
        .tab-active {
          color: #ff6700;
          border-bottom: 2px solid #ff6700;
        }
        li {
          margin: 0 0 0 30px;
          display: inline-block;
        }
      }
    }
  }
  .brick {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.q {
  width: 234px;
  margin: 0 0 -14px -14px;
}

.w {
  width: 992px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.e {
  width: 234px;
  height: 300px;
  margin-left: 14px;
  margin-bottom: 14px;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
</style>
